<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/15
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>

    <script src="${pageContext.request.contextPath}/js/layui.js" charset="utf-8"></script>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <meta charset="UTF-8">
    <title>评论</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/comment.css">
</head>
<body>
<!--最上面的导航-->
<div class="shortcut-2014">
    <div class="w">
        <ul class="fr">
            <li class="fore1 fore1zidingyi" id="ttbar-login">
                <a href="${pageContext.request.contextPath}/customer/login.jsp" class="link-login">你好，请登录</a>
                <a href="${pageContext.request.contextPath}/customer/register.jsp"
                   class="link-regist style-red">免费注册</a>
            </li>
            <!--<li class="spacer"></li>-->
            <li class="fore2">
                <div class="dt">
                    <a href="${pageContext.request.contextPath}/order/myorder.jsp" target="_blank">我的订单</a>
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="o-header-2013">
    <div id="header-2013" style="display:none;"></div>
</div>
<!-- 下面的带 logo 的部分 -->
<div id="nav">
    <div class="w">

        <!-- logo 部分 -->
        <div class="logo">
            <a href="${pageContext.request.contextPath}/product/generalMerchandise.jsp" class="fore11" target="_blank"></a>
            <a href="${pageContext.request.contextPath}/customer/personalcenter.jsp" class="fore22"
               target="_blank">我的树懒</a>
            <a href="${pageContext.request.contextPath}/product/generalMerchandise.jsp" class="fore33" target="_blank">返回树懒首页</a>
        </div>

        <!-- 我的购物车部分样式 -->
        <div class="nav-r zidingyiright">
            <div id="settleup-2014" class="dorpdown">
                <div class="cw-icon" id="zidingyi">
                    <i class="ci-left"></i>
                    <i class="ci-right">></i>
                    <!--<i class="ci-count" id="shopping-amount">28</i>-->
                    <a href="${pageContext.request.contextPath}/customer/shopcar.jsp" target="_blank">我的购物车</a>
                </div>
            </div>
        </div>

    </div>
</div>
<!--主体-->
<div id="container">
    <div class="w">
        <div class="mycomment-detail">
            <div class="detail-hd" id="o-info-orderinfo">
                <div class="orderinfo">
                    <h3 class="o-title">评价订单</h3>
                    <div class="o-info">
                            <span class="mr20">订单号：<a
                                    href=""
                                    target="_blank" class="gray1">217990131847</a></span>
                        <span>2021-08-13 01:06:29</span>
                    </div>
                </div>
            </div>
            <div class="mycomment-form">
                <!-- page -->
                <div class="f-item f-goods product-1000518590">
                    <div class="fi-info">
                        <div class="comment-goods">
                            <div class="p-img">
                                <a href="${pageContext.request.contextPath}/product/2" target="_blank">
                                    <img src="${pageContext.request.contextPath}/images/c1.jpg" >
                                </a>
                            </div>
                            <div class="p-name">
                                <a href="${pageContext.request.contextPath}/product/2" target="_blank">华为 Mate40 12GB+256GB 亮黑</a>
                            </div>
                            <div class="p-price"><strong>¥6069.00</strong></div>
                            <div class="p-attr"></div>
                        </div>
                    </div>
                    <div class="fi-operate">
                        <div class="fop-item fop-star   z-tip-warn">
                            <div class="fop-label">商品评分</div>
                            <div class="fop-main">



                                    <img id="1" src="${pageContext.request.contextPath}/images/star1.png" />
                                    <img id="2" src="${pageContext.request.contextPath}/images/star1.png" />
                                    <img id="3" src="${pageContext.request.contextPath}/images/star1.png" />
                                    <img id="4" src="${pageContext.request.contextPath}/images/star1.png" />
                                    <img id="5" src="${pageContext.request.contextPath}/images/star1.png" />

                            </div>
                            <div class="fop-tip"><i class="tip-icon"></i><em class="tip-text"></em></div>
                            <div class="fi-tip"><i class="tip-icon"></i><em class="tip-text">请至少填写一件商品的评价</em></div>
                        </div>
                        <div class="fop-item ">
                            <div class="fop-label">评价晒单</div>
                            <div class="fop-main">
                                <div class="f-textarea">
                                    <textarea name="" id="" placeholder=""
                                              style="margin: 0px 14px 0px 0px; width: 628px; height: 112px;"></textarea>
                                    <div class="textarea-ext">还可输入500字</div>
                                </div>
                            </div>
                            <div class="fop-tip"><i class="tip-icon"></i><em class="tip-text"></em></div>
                        </div>

                    </div>
                </div>
                <!-- page -->
                <div class="f-btnbox">
                    <a href="" class="btn-submit">发表</a>
                    <span class="f-checkbox">
					<input id="check1" class="i-check" type="checkbox" checked="checked">
					<label for="check1">匿名评价</label>
					</span>
                </div>
            </div>

        </div>
    </div>
</div>
<!--下方提示信息-->
<div id="cmsfooter">
    <div id="service-2017">
        <!-- 多快好省 -->
        <div class="w hhzidingyi">
            <ol class="slogen">
                <li class="item ">
                    <i>多</i>
                    品类齐全，轻松购物
                </li>
                <li class="item fore2">
                    <i>多</i>
                    多仓发货，极速配送
                </li>
                <li class="item fore3">
                    <i>好</i>
                    正品行货，精致服务
                </li>
                <li class="item fore4">
                    <i>省</i>
                    天天低价，畅选无忧
                </li>
            </ol>
        </div>
        <!--下面的信息-->
        <div class="shulan-help">
            <div class="w hhzidingyi">
                <div class="tishixinxi">
                    <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var clickIndex = -1;
    onload = function () {
        //获取所有的img标签
        var imgs = document.getElementsByTagName('img');
        //遍历所有图片对象,为每个图片注册指向事件
        for (var index in imgs) {
            imgs[index].onmouseover = function () {
                //将当前的及之前的图片变黄，之后的变为灰色
                var id = this.id;//获取当前元素的id
                for (var i = 0; i < imgs.length; i++) {
                    //当前元素之前的元素
                    if (i <= id) {
                        //star2为黄色图片
                        imgs[i].src = '${pageContext.request.contextPath}/images/star2.png';
                    }
                    else {
                        //当前元素之后的图片，颜色为灰色
                        imgs[i].src = '${pageContext.request.contextPath}/images/star1.png';
                    }
                }
            };
            //为每个图片对象注册移开事件
            imgs[index].onmouseout = function () {
                //被点击项之前的元素为黄色
                for (var i = 0; i <= clickIndex; i++) {
                    imgs[i].src = '${pageContext.request.contextPath}/images/star2.png';
                }
                for (var i = clickIndex + 1; i < imgs.length; i++) {
                    //被点击项之后的元素为灰色
                    imgs[i].src = '${pageContext.request.contextPath}/images/star1.png';
                }
            };
            //为每个图片注册点击事件
            imgs[index].onclick = function () {
                //记录下来被点的图片编号，编号与索引对应
                clickIndex = parseInt(this.id);
            };
        }
    };

</script>

</body>
</html>